<template>

    <a-form ref="formRef" :model="value" :labelCol="{ style: { width: '120px' } }">
        <a-row :gutter="[24, 24]">

            <a-col :span="8">
                <a-form-item label="名称" name="name" required>
                    <a-input v-model:value="value.name" placeholder="请输入商品名称" allowClear />
                </a-form-item>
            </a-col>

            <a-col :span="8">
                <a-form-item label="所属类别" name="categoryId" required>
                    <CategoryInput v-model:categoryId="value.categoryId" :categoryName="value.category?.name"></CategoryInput>
                </a-form-item>
            </a-col>

            <a-col :span="8">
                <a-form-item label="价格（元）" name="price" required>
                    <a-input-number v-model:value="value.price">
                        <template #addonAfter>
                            <a-select v-model:value="value.unit" style="width: 80px">
                                <a-select-option value="斤">斤</a-select-option>
                                <a-select-option value="吨">吨</a-select-option>
                                <a-select-option value="袋">袋</a-select-option>
                                <a-select-option value="箱">箱</a-select-option>
                            </a-select>
                        </template>
                    </a-input-number>
                </a-form-item>
            </a-col>

            <a-col :span="8">
                <a-form-item label="所属供应商" name="companyId" required>
                    <CompanyInput v-model:companyId="value.companyId" :companyName="value.company?.name"></CompanyInput>
                   
                </a-form-item>
            </a-col>




            <a-col :span="24">
                <a-form-item label="商品介绍" name="remark">
                    <!-- <Editor v-model:content="value.remark"></Editor> -->
                    <WangEditor v-model:value="value.remark" ></WangEditor>
                   
                </a-form-item>
            </a-col>

            <a-col :span="24">
                <a-form-item label="图片上传" name="imgList">
                    <uploadImg v-model:list="value.imgList" :maxCount="3"></uploadImg>
                </a-form-item>

            </a-col>




        </a-row>
    </a-form>


</template>
<script setup lang="ts">
import type { Goods } from '@/types/Goods';
import { onMounted, ref } from 'vue';

import uploadImg from '@/components/uploadImg.vue'

import { useTabStore } from '@/stores/tab'


import { useGoodsStore } from '@/stores/goods'
import CompanyInput from '@/components/companyInput.vue';

import CategoryInput from '@/components/categoryInput.vue';
import WangEditor from '@/components/wangEditor.vue';

const goodsStore = useGoodsStore()
const tabStore = useTabStore()
const value = defineModel<Goods>('value', { default: {} })
const formRef = ref()

onMounted(() => {
    if(!value.value.unit){
        value.value.unit = '斤'
    }
})

const validate = async () => {
    await formRef.value.validate();
};
const resetFields = () => {
    formRef.value.resetFields();
};
defineExpose({
    validate,
    resetFields,
});
</script>
<style scoped></style>